<template>
  <div class="page-container">
    <!-- 缩放容器：承载所有内容，基于原9600*2240分辨率 -->
    <div class="scale-container">
      <!-- 顶部标题 -->
      <div class="headTitle">{{ headTitle }}</div>
      <div class="headButton" @click="backHome"></div>
      <div class="left1" @click="goToService('tianjinnewEnergy')"></div>
      <div class="right1" @click="goToService('kunming')"></div>
      <!-- 左边内容 -->
      <div class="left">
        <div class="box">
          <div class="headbox">
            <div class="headImg"></div>
            <div class="title">中汽研汽车检验中心(武汉)有限公司</div>
          </div>
          <div class="content">
            <img class="img1" src="/imgs/wuhan/图片9.png" />
            <p class="contentTitle">
              中汽研汽车检验中心（武汉）有限公司，简称武汉检验中心，成立于1985年，现为中汽中心全资子公司。作为汽车产业综合性服务机构，其业务范围涵盖标准法规、产品检测、行业咨询、媒体传播和技术研发等。公司总资产超11亿元，在职员工247名，主院区位于武汉，同时在湖北省内外投资运营多个综合性试验基地和服务网点。
            </p>
          </div>
          <div class="content">
            <div class="carousel-image-wrapper">
              <img :src="images[currentIndex]" alt="轮播图" class="carousel-image">
            </div>
            <div class="carousel-dots">
              <span v-for="(img, idx) in images" :key="idx" class="dot" :class="{ active: currentIndex === idx }"
                @click="currentIndex = idx"></span>
            </div>
            <div class="content1-1">
              <!-- 循环渲染三个数据项（含图标） -->
              <div class="data-item" v-for="(item, index) in dataList" :key="index">
                <!-- 图标图片 -->
                <img :src="item.icon" alt="图标" class="icon">
                <!-- 文本内容 -->
                <div class="info">
                  <div class="value" v-html="item.title"></div>
                  <div class="desc" v-html="item.desc"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="box3">
          <div class="content">
            <div class="headImg"></div>
            <div class="title">组织架构</div>
          </div>
          <div class="content2">
          </div>
        </div>
      </div>
      <!-- 中间内容 -->
      <div class="middle">
        <div class="img1"></div>
        <div class="img2"></div>
        <div class="content">
          <div class="years"><span style="font-family: '微软雅黑粗体';">1985年</span></div>
          <div class="values">汉阳专用汽车研究所成立</div>
        </div>
        <div class="content2">
          <div class="years"><span style="font-family: '微软雅黑粗体';">2003年</span></div>
          <div class="values">汉阳所成立武汉华威专用汽车检测有限责任公司，<span style="font-family: '微软雅黑粗体';">以独立第三方身份开展检验检测服务</span></div>
        </div>
        <div class="content3">
          <div class="years"><span style="font-family: '微软雅黑粗体';">2006-2007年</span></div>
          <div class="values"><span style="font-family: '微软雅黑粗体';">2006年汉阳所整体划归中汽中心，2007年 迁入武汉经济技术开发区，</span>建成自有检测基地
          </div>
        </div>
        <div class="content4">
          <div class="years"><span style="font-family: '微软雅黑粗体';">2013年</span></div>
          <div class="values"><span style="font-family: '微软雅黑粗体';">武汉检验中心新基地一期竣工，迁入现址</span></div>
        </div>
        <div class="content5">
          <div class="years"><span style="font-family: '微软雅黑粗体';">2017年</span></div>
          <div class="values">启动武汉检验中心二期基地建设</div>
        </div>
        <div class="content6">
          <div class="years"><span style="font-family: '微软雅黑粗体';">2019年</span></div>
          <div class="values">获得“<span style="font-family: '微软雅黑粗体';">国家新能源汽车质量检验检测中心</span>”资质</div>
        </div>
        <div class="content7">
          <div class="years"><span style="font-family: '微软雅黑粗体';">2021年</span></div>
          <div class="values"><span style="font-family: '微软雅黑粗体';">具备公告、3C、营运、环保汽车 产品检验检测全项资质</span></div>
        </div>
        <div class="content8">
          <div class="years"><span style="font-family: '微软雅黑粗体';">2023年</span></div>
          <div class="values"><span style="font-family: '微软雅黑粗体';">中汽中心华中分中心成立</span></div>
        </div>
        <div class="content9">
          <div class="years"><span style="font-family: '微软雅黑粗体';">2025年7月</span></div>
          <div class="values"><span style="font-family: '微软雅黑粗体';">武汉检验中心新基地建设项目</span></div>
        </div>
        <div class="content15">中汽研汽车检验中心(武汉)有限公司</div>
        <div class="content18">
          <div class="tubiao1"></div>
          <span class="tubiaoTitle">总资产<span class="tubiaoValue">11.67</span>亿元</span>
          <div class="tubiao2"></div>
          <span class="tubiaoTitle">员工人数<span class="tubiaoValue">270</span>人</span>
          <div class="tubiao3"></div>
          <span class="tubiaoTitle">实验基地<span class="tubiaoValue">2</span>个</span>
        </div>
        <div class="content19">
          <div class="img1"></div>
          <div class="img2"></div>
          <div class="img3"></div>
          <span class="title">武汉</span>
          <div class="pointImg"></div>
          <div class="img4"></div>
          <div class="img5"></div>
          <div ref="lottieRef" class="lottie-box"></div>
        </div>
      </div>
      <!-- 右边内容 -->
      <div class="right">
        <div class="box">
          <div class="headbox">
            <div class="headImg"></div>
            <div class="title">主营业务</div>
          </div>
          <div class="modules-container">
            <!-- 检验检测模块 -->
            <Module :title="`检验检测`" :navs="inspectionNavs" :contents="inspectionContents" />
            <!-- 行业技术服务模块 -->
            <Module :title="`行业技术服务`" :navs="techNavs" :contents="techContents" />
            <!-- 传媒信息服务模块 -->
            <Module :title="`传媒信息服务`" :navs="mediaNavs" :contents="mediaContents" />
          </div>
        </div>
        <div class="box2">
          <div class="headbox">
            <div class="headImg"></div>
            <div class="title">资质情况</div>
          </div>
          <div class="content">
            <div class="leftbox">
              武汉检验中心已被工业和信息化部授权为“道路机动车辆产品准入检验检测机构”；被国家交通运输部授权为“道路运输车辆安全达标检测机构”；被国家认证认可监督管理委员会（CNCA）指定为 CCC
              指定实验室；被国家生态环境部授权为“汽车环保产品认定、排放检验机构“，现拥有汽车及零部件产品检验检测全项资质。</div>
            <div class="rightbox">
              <div class="content1-1">
                <div class="title">2019.3</div>
                <div class="title">2019.7</div>
                <div class="title">2019.11</div>
                <div class="title">2020.4</div>
                <div class="title">2021.7</div>
                <div class="title">2021.11</div>
              </div>
              <div class="content1-2">
                <div class="title">获得交通运输部授权</div>
                <div class="value">道路运输车辆安全达标检测机构</div>
                <div class="title">获得生态环境部授权</div>
                <div class="value">汽车环保产品认定、排放检验机构</div>
              </div>
              <div class="content1-3">
                <div class="title">获得国家认监委授权</div>
                <div class="value">国家新能源汽车质量检验检测中心（CAL）</div>
                <div class="value">实验室认可(CNAS持续授权)</div>
              </div>
              <div class="content1-4">
                <div class="title">获得工业和信息化部授权</div>
                <div class="value">道路机动车辆产品准入检验检测机构</div>
              </div>
              <div class="content1-5">
                <div class="title">获得国家认监委授权</div>
                <div class="value">CCC 指定实验室</div>
                <div class="value">（汽车-O类汽车+座椅头枕）</div>
              </div>
              <div class="content1-6">
                <div class="title">获得国家认监委授权</div>
                <div class="value">CCC 指定实验室</div>
                <div class="value">（（汽车-M2/M3/N2/N3））</div>
              </div>
              <div class="content1-7">
                <div class="title">获得国家认监委授权</div>
                <div class="value">CCC 指定实验室</div>
                <div class="value">（单车认证+非量产核查+守诺核查）</div>
              </div>
              <div class="content1-8">
                <div class="title">获得国家认监委授权</div>
                <div class="value">CCC 指定实验室</div>
                <div class="value">（汽车-M1/N1）</div>
              </div>
            </div>
          </div>
        </div>
        <div class="box3">
          <div class="headbox">
            <div class="headImg"></div>
            <div class="title">人员情况</div>
          </div>
          <div class="content">
            <div class="leftbox">
              <div class="content1-1">人员情况</div>
              <div class="box2-1" v-for="(item, index) in statsData" :key="index">
                <img class="img1" :src="item.icon" />
                <div class="box2-2">
                  <div class="text">{{ item.label }}</div>
                  <div class="box2-3">
                    <div class="text2">{{ item.value }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="content2">
              <div class="content1">
                <div class="content1-1">人员类别</div>
                <div class="content1-2">
                  <chartCube :xAxis="xAxisData" :series="seriesData" />
                </div>
              </div>
            </div>
            <div class="content3">
              <div class="content3-1">
                <div class="content-title" v-for="(title, index) in titles" :key="index" :style="goBackImage(index)"
                  @click="goBackClick(index)">
                  {{ title }}
                </div>
              </div>
              <div class="content3-2">
                <piechartKj3D class="chartsGl" :datalist="currentChartData">
                </piechartKj3D>
              </div>
            </div>
            <div class="content4">
              <div class="content4-1">
                <div class="content-title" v-for="(title, index) in titles2" :key="index" :style="goBackImage2(index)"
                  @click="goBackClick2(index)">
                  {{ title }}
                </div>
              </div>
              <div class="content4-2">
                <chartHengCube class="chartsGl" :data="currentChartData2" height="400px"
                  :cylinderConfig="{ barHeight: 36, gap: 24, depth: 10 }">
                </chartHengCube>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, nextTick, onUnmounted, computed } from "vue";
import lottie from 'lottie-web';
import Module from './rightModule.vue'; // 引入模块组件
import chartCube from '../../components/chart/bar-3d.vue'; // 引入柱状图组件
import chartHengCube from '../../components/chart/HengBar-3d.vue'; // 引入柱状图组件
import piechartKj3D from "../../components/chart/chartPie.vue";
//路由
import { useRouter } from 'vue-router'
const router = useRouter();
const headTitle = ref('中国汽车技术研究中心有限公司数字沙盘')
// 响应式数据
const lottieRef = ref(null);
let animationInstance = null;
// 响应式状态：控制弹窗显示
const showVideo = ref(false);
// 1. 轮播图片数据（替换为你的实际图片路径）
const images = ref([
  'imgs/wuhan/轮播一.jpg',  // 第一张图（示例图中的赛道图）
  'imgs/wuhan/轮播二.jpg',  // 第二张图
  'imgs/wuhan/轮播三.png',  // 第三张图（根据实际数量增减）
]);
//跳转路由
const backHome = () => {
  router.push({ name: 'home' })
}
// 定义样式函数：根据索引判断是否为选中状态
const goBackImage2 = (index) => {
  // 如果当前索引是选中的，返回背景色样式；否则返回空
  return currentIndexTitle2.value === index
    ? {
      backgroundImage: `url("/imgs/wuhan/图层 1055 拷贝 2.png")`,

    }
    : {

    };
};
const goBackClick2 = (index) => {
  currentIndexTitle2.value = index;

}
// 1. 标题列表
const titles2 = ref([
  '学历分布',
  '专业技术职称',
  '年龄分布',
  '人才工程'
]);
// 2. 每个标题对应的图表数据（根据图表组件要求的格式定义）
const chartDataList2 = ref([
  // 学历分布对应的数据
  [
    { label: '博士', value: 2, color: '#2F70BB' },
    { label: '硕士', value: 117, color: '#2F70BB' },
    { label: '本科', value: 96, color: '#2F70BB' },
    { label: '本科以下', value: 55, color: '#2F70BB' }
  ],
  // 专业技术职称对应的数据
  [
    { label: '正高级', value: 2, color: '#2F70BB' },
    { label: '副高级', value: 31, color: '#2F70BB' },
    { label: '中级', value: 116, color: '#2F70BB' },
    { label: '助理级', value: 71, color: '#2F70BB' }
  ],
  // 年龄分布对应的数据
  [
    { label: '30岁以下', value: 91, color: '#2F70BB' },
    { label: '31-40岁', value: 132, color: '#2F70BB' },
    { label: '41-50岁', value: 37, color: '#2F70BB' },
    { label: '51岁及以上', value: 10, color: '#2F70BB' }
  ],
  // 人才工程对应的数据
  [
    { label: '学科带头人', value: 8, color: '#2F70BB' },
    { label: '青年科技骨干', value: 44, color: '#2F70BB' },
  ]
]);
// 3. 响应式状态：当前选中的标题索引（默认选中第一个“学历分布”）
const currentIndexTitle2 = ref(0);
// 4. 计算属性：根据当前选中的索引，返回对应的图表数据
const currentChartData2 = computed(() => {
  return chartDataList2.value[currentIndexTitle2.value];
});
// 定义样式函数：根据索引判断是否为选中状态
const goBackImage = (index) => {
  // 如果当前索引是选中的，返回背景色样式；否则返回空
  return currentIndexTitle.value === index
    ? {
      backgroundImage: `url("/imgs/wuhan/图层 1055 拷贝 2.png")`,

    }
    : {

    };
};
const goBackClick = (index) => {
  currentIndexTitle.value = index;
}
// 1. 标题列表
const titles = ref([
  '职务分布',
  '序列分布',
]);
// 2. 每个标题对应的图表数据（根据图表组件要求的格式定义）
const chartDataList = ref([
  // 职务分布对应的数据
  [
    { name: "高级领导人员", value: 1, itemStyle: { color: "#BBC5E2" } },
    { name: "经理级领导人员", value: 6, itemStyle: { color: "#90A2D4" } },
    { name: "技术总监", value: 4, itemStyle: { color: "#4472C4" } },
    { name: "主管工程师", value: 6, itemStyle: { color: "#3B65AE" } },
    { name: "其他人员", value: 83, itemStyle: { color: "#315494" } },
  ],
  // 序列分布对应的数据
  [
    { name: '管理序列', value: 7, itemStyle: { color: "#C0C9E4" } },
    { name: '技术序列', value: 72, itemStyle: { color: "#9EADD8" } },
    { name: '职能序列', value: 7, itemStyle: { color: "#6D89CB" } },
    { name: '营销序列', value: 6, itemStyle: { color: "#406DBB" } },
    { name: '技能序列', value: 5, itemStyle: { color: "#3960A7" } },
    { name: '服务序列', value: 3, itemStyle: { color: "#2F528F" } }
  ]
]);
// 3. 响应式状态：当前选中的标题索引（默认选中第一个“学历分布”）
const currentIndexTitle = ref(0);
// 4. 计算属性：根据当前选中的索引，返回对应的图表数据
const currentChartData = computed(() => {
  return chartDataList.value[currentIndexTitle.value];
});
//x轴标签
const xAxisData = ref([
  "中心合同",
  "部门合同",
  "劳务外包",
]);
//数据
const seriesData = ref({
  name: "数量",
  data: [200, 500, 300, 250, 360, 700, 556],
});
// 1. 响应式数据（支持动态更新）
const statsData = ref([
  {
    icon: '/imgs/wuhan/组 7752 拷贝 3(2).png', // 平均年龄图标
    label: '总人数',
    value: 270,
  },
  {
    icon: '/imgs/wuhan/组 7752 拷贝 16.png', // 平均工作年限图标
    label: '平均年龄',
    value: 34.7,
  }
]);
// 三个数据项的配置（含图标路径和文本）
const dataList = ref([
  {
    icon: '/imgs/wuhan/组 7752.png', // 总资产图标路径
    title: '<span style="color: #70C3F5">总资产11.67亿</span>',
    desc: '资产规模实现稳健增长<br>资产质量逐渐提高'
  },
  {
    icon: '/imgs/wuhan/组 7752 拷贝 3(1).png', // 试验基地图标路径
    title: '<span style="color: #70C3F5">2个外部综合性试验基地</span>',
    desc: '湖北孝感<br>山东梁山'
  },
  {
    icon: '/imgs/wuhan/园区.png', // 主院区图标路径
    title: '主院区<span style="color: #70C3F5">武汉</span>占地百亩',
    desc: '' // 第三个数据项无额外描述
  }
]);
// 2. 响应式状态：当前显示的图片索引
const currentIndex = ref(0);
// 定时器标识（用于自动切换）
let carouselTimer = null;
// 3. 自动切换逻辑：每5秒切换到下一张
const autoSwitch = () => {
  // 计算下一张索引（最后一张切换到第一张）
  currentIndex.value = (currentIndex.value + 1) % images.value.length;
};
// 初始化 Lottie 动画
const initLottieAnimation = () => {
  if (lottieRef.value) {
    animationInstance = lottie.loadAnimation({
      container: lottieRef.value,
      path: '/animations/wuhan.json',
      loop: true,
      autoplay: true,
    });
  }
};
// 1. 检验检测模块数据
const inspectionNavs = [
  '整车及智能网联',
  '新能源',
  '节能排放',
  '汽车安全',
  '专用车'
];
const inspectionContents = [
  {
    texts: [
      '整车法规类测试',
      '整车研发委托类测试',
      '智能驾驶道路测试',
      '信息安全与软件升级测试',
      '智能座舱测试'
    ],
    images: [
      'imgs/wuhan/图片10.png',
      'imgs/wuhan/图片11.png',
    ]
  },
  {
    texts: ['“新三电”法规测试，动力电池', '电机电控和燃料电池研发委托测试', 'EMC公告/CCC/出口/船级社认证', '整车EMC研发类项目', '新能源及电子电器检测', '车联网与射频通讯类检测'],
    images: [
      'imgs/wuhan/新能源1.png',
      'imgs/wuhan/新能源2.png',
    ]
  },
  {
    texts: ['轻型排放试验室', '发动机试验室', '重排试验室'],
    images: [
      'imgs/wuhan/节能排放1.jpg',
      'imgs/wuhan/节能排放2.png',
    ]
  },
  {
    texts: ['实车碰撞', '行人保护', '滑台冲击', '车身附件'],
    images: [
      'imgs/wuhan/汽车安全1.jpg',
      'imgs/wuhan/汽车安全2.png',
    ]
  },
  {
    texts: ['专用车公告认证检测', '汽车CCC补项认证检测', '专用车性能委托检测以及环保认证检测'],
    images: [
      'imgs/wuhan/专用汽车1.png',
      'imgs/wuhan/专用汽车2.png',
    ]
  }
];
// 2. 行业技术服务模块数据
const techNavs = ['01 标准法规', '02 技术服务', '03 行业服务'];
const techContents = [
  {
    texts: [
      '受国家汽车主管部门委托，承担全标委“专用汽车”和“车身附件”分标委秘书处，负责标准化归口管理',
      '组织开展“专用汽车”和“车身附件”标准制修订、审查、复审等工作',
      '国内外标准法规信息服务、 标准宣贯培训'
    ],
    images: [
      'imgs/wuhan/标准法规1.png',
      'imgs/wuhan/标准法规2.png'
    ]
  },
  {
    texts: [
      '产品正向开发：项目分析、产品设计、工程分析、产品试制',
      '产品结构优化：轻量化设计、强度分析、动力学优化',
      '企业准入咨询：政策解读、资料准备、预审'
    ],
    images: [
      'imgs/wuhan/技术服务1.gif',
      'imgs/wuhan/技术服务2.gif'
    ]
  },
  {
    texts: [
      '中国汽车工业协会专用车分会、中国汽车工程学会专用车分会秘书处单位',
      '行业发展分析、政府决策建议',
      '搭建交流平台：为行业发声、组织企业走出去',
      '推进行业自律：自愿性认证、标准“领跑者”评选',
    ],
    images: [
      'imgs/wuhan/行业活动1.png',
      'imgs/wuhan/行业活动2.png',
    ]
  }
];

// 3. 传媒信息服务模块数据
const mediaNavs = ['媒体宣传', '行业活动', '咨询服务'];
const mediaContents = [
  {
    texts: [
      '以杂志、公众号为主要载体，发布行业权威资讯，媒体赋能营销推广'
    ],
    images: [
      'imgs/wuhan/媒体宣传1.png',
      'imgs/wuhan/媒体宣传2.png'
    ]
  },
  {
    texts: [
      '以展览、会议等为主要抓手，打造产业链上下游合作交流的平台'
    ],
    images: [
      'imgs/wuhan/行业活动1.png',
      'imgs/wuhan/行业活动2.png'
    ]
  },
  {
    texts: [
      '涵盖地区产业规划、企业战略、数据分析、市场调研、可研性研究等'
    ],
    images: [
      'imgs/wuhan/咨询服务.png'
    ]
  }
];

// 修改initScrollAnimations函数，实现不同数量条目下的同步滚动
const initScrollAnimations = () => {
  const containers = Array.from(document.querySelectorAll('.scroll-container'));
  if (containers.length === 0) return;
  // 全局配置（所有容器共享的滚动节奏）
  const pauseTime = 2500; // 统一停顿时间（2.5秒）
  const scrollDuration = 500; // 统一滚动动画时间（0.5秒）
  let isAnimating = false; // 全局动画锁，防止并发滚动
  let globalTimer = null; // 全局计时器控制同步节奏
  // 为每个容器初始化独立状态（记录自己的进度）
  const containerStates = containers.map(container => {
    const items = Array.from(container.querySelectorAll('.scroll-item:not(.copy-first)'));
    const itemCount = items.length;
    // 复制第一个条目用于自己的无缝循环
    const copyFirst = container.querySelector('.copy-first');
    copyFirst.innerHTML = items[0] ? items[0].innerHTML : '';
    copyFirst.style.display = itemCount > 0 ? 'flex' : 'none';
    return {
      container, // 容器DOM
      items, // 自己的条目列表
      itemCount, // 自己的条目总数（如3或8）
      currentIndex: 0, // 自己当前的索引
      width: container.offsetWidth // 自己的宽度（支持不同列宽度）
    };
  });
  // 同步触发所有容器滚动（各自走自己的下一个索引）
  const scrollAll = () => {
    if (isAnimating) return;
    isAnimating = true;
    // 每个容器计算自己的下一个索引和目标位置
    containerStates.forEach(state => {
      if (state.itemCount === 0) return; // 无内容则不滚动
      // 计算自己的下一个索引（独立循环）
      let nextIndex = state.currentIndex + 1;
      // 目标位置：如果是最后一个条目，下一个滚动到复制的条目（用于无缝循环）
      const targetPosition = nextIndex <= state.itemCount
        ? -nextIndex * state.width
        : -state.itemCount * state.width; // 最后一个条目后，先滚动到复制的条目
      // 应用滚动（所有容器同时开始动画）
      state.container.style.transition = `transform ${scrollDuration}ms ease`;
      state.container.style.transform = `translateX(${targetPosition}px)`;
      // 更新自己的索引（临时存为nextIndex，动画结束后确认）
      state.tempNextIndex = nextIndex;
    });
    // 动画结束后处理每个容器的状态（独立复位）
    setTimeout(() => {
      containerStates.forEach(state => {
        if (state.itemCount === 0) return;
        // 如果滚动到了复制的条目（超出自己的条目总数），则无缝复位
        if (state.tempNextIndex > state.itemCount) {
          state.container.style.transition = 'none'; // 取消动画，瞬间复位
          state.container.style.transform = 'translateX(0)';
          state.currentIndex = 0; // 重置为第一个条目
          // 重新启用过渡效果（下次滚动生效）
          setTimeout(() => {
            state.container.style.transition = `transform ${scrollDuration}ms ease`;
          }, 50);
        } else {
          // 正常更新索引
          state.currentIndex = state.tempNextIndex;
        }
      });
      isAnimating = false;
      startGlobalTimer(); // 所有容器处理完后，启动下一次全局计时
    }, scrollDuration);
  };
  // 全局计时器：控制所有容器同步停顿后滚动
  const startGlobalTimer = () => {
    clearTimeout(globalTimer);
    globalTimer = setTimeout(scrollAll, pauseTime);
  };
  // 全局暂停/继续：鼠标悬停任何容器，所有容器一起暂停
  containers.forEach(container => {
    container.addEventListener('mouseenter', () => {
      clearTimeout(globalTimer);
    });
    container.addEventListener('mouseleave', () => {
      if (!isAnimating) {
        startGlobalTimer();
      }
    });
  });
  // 初始启动
  startGlobalTimer();
};
//跳转路由
const goToService = (item) => {
  router.push({ name: item })
}
onMounted(() => {
  // 初始延迟5秒后开始自动切换，之后每5秒一次
  carouselTimer = setInterval(autoSwitch, 5000);
  initLottieAnimation();
  // 等待DOM完全渲染后初始化滚动动画
  nextTick(() => {
    initScrollAnimations();
  });
})
// 组件销毁时清除定时器（防止内存泄漏）
onUnmounted(() => {
  // 组件销毁时清除定时器，避免内存泄漏
  clearInterval(carouselTimer);
});
</script>
<style scoped>
/* 在原样式基础上添加/修改以下内容 */
.right .box .content {
  /* 移除绝对定位，避免布局冲突 */
  position: relative;
  overflow: hidden;
}

/* 滚动容器设置为水平布局 */
.scroll-container {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
  /* 平滑过渡效果 */
}

/* 每个滚动项占满容器宽度，确保内容居中显示 */
.scroll-item {
  min-width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 20px;
}

/* 确保图片和文字不超出边界 */
.scroll-item .img1,
.scroll-item .img2 {
  max-width: 40%;
  height: auto;
  object-fit: contain;
}

.scroll-item .contentTitle {
  max-width: 50%;
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  /* 最多显示4行 */
  -webkit-box-orient: vertical;
}

/* 隐藏复制的条目（用于无缝循环） */
.copy-first {
  display: none;
}

/* 触发区域样式（保持原有） */
.box {
  cursor: pointer;
  /* 提示可点击 */
  /* 原有样式... */
}

@keyframes sweep {
  0% {
    background-position: -100%;
  }

  100% {
    background-position: 200%;
  }
}

/* 上下浮动动画 */
@keyframes floatUpDown {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
    /* 向下移动20px */
  }
}

/* 视频弹窗：全屏覆盖 */
.video-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 9600px;
  height: 2240px;
  background-color: rgba(0, 0, 0, 0.95);
  /* 深色背景突出视频 */
  z-index: 9999;
  /* 最高层级，覆盖所有内容 */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}

/* 视频播放器：自适应全屏 */
.video-player {
  width: 9600px;
  height: 2240px;
  /* 避免超出屏幕 */
  object-fit: contain;
  /* 保持视频比例，不拉伸 */
}

/* 关闭按钮 */
.video-close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: #fff;
  font-size: 40px;
  cursor: pointer;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transition: all 0.3s;
}

.video-close:hover {
  background-color: #ff4d4f;
  /* hover时变红，增强交互 */
}

/* 禁止页面滚动（弹窗显示时） */
:deep(body) {
  overflow: v-bind('showVideo ? "hidden" : "auto"');
}


/* 可视区域容器：固定为目标分辨率6240*1456 */
.page-container {
  width: 6240px;
  height: 1456px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}

/* 原始设计稿容器：基于9600*2240，通过缩放适配新分辨率 */
.scale-container {
  width: 9600px;
  height: 2240px;
  transform: scale(0.65);
  transform-origin: 0 0;
  position: relative;
}


.lottie-box {
  z-index: 99;
  position: absolute;
  left: 969px;
  top: 386px;
  width: 885px;
  height: 889px;
  font-size: 80px;
}

.headTitle {
  text-align: center;
  position: relative;
  top: -24px;
  font-size: 130px;
  font-family: YouSheBiaoTiHei;
  font-weight: 400;
  color: #FFFFFF;
  background: linear-gradient(0deg, rgba(0, 216, 255, 0.66) 10%, rgba(255, 255, 255, 1) 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.left1 {
  z-index: 999;
  cursor: pointer;
  top: 45%;
  left: 10px;
  position: absolute;
  width: 94px;
  height: 258px;
  background-image: url("/imgs/home/left1.png");
  background-position: left;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.right1 {
  z-index: 999;
  cursor: pointer;
  position: absolute;
  top: 45%;
  right: 10px;
  width: 94px;
  height: 258px;
  background-image: url("/imgs/home/right1.png");
  background-position: left;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.headButton {
  cursor: pointer;
  display: flex;
  float: inline-end;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 78px;
  height: 78px;
  background-image: url("/imgs/ningbo/cancel.png");
  background-position: left;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.left {
  display: flex;

  .box {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-left: 140px;
    width: 3000px;

    .headbox {
      display: flex;
      height: 158px;
      width: 2247px;
      flex-wrap: nowrap;
      flex-direction: row;
      background-image: url("/imgs/ningbo/t(1).png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .headImg {
        margin-left: 220px;
        margin-top: 41px;
        width: 53px;
        height: 58px;
        background-image: url("/imgs/ningbo/菱形 拷贝.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .title {
        margin-left: 30px;
        margin-top: 22px;
        height: 49px;
        font-family: "微软雅黑粗体";
        font-weight: 400;
        font-size: 57px;
        color: #FFFFFF;
      }
    }

    .content {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: flex-start;
      /* position: absolute; */
      top: 378px;
      width: 1476px;
      height: 1096px;
      background-image: url("/imgs/ningbo/矩形 933 拷贝 3.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .carousel-container {
        width: 100%;
        max-width: 1200px;
        /* 根据实际场景调整 */
        margin: 0 auto;
        background-color: #051428;
        /* 深色背景，贴合设计风格 */
        border: 1px solid #1e4b79;
        border-radius: 8px;
        overflow: hidden;
        padding-bottom: 20px;
      }

      /* 图片容器样式 */
      .carousel-image-wrapper {
        border-radius: 10px;
        width: 1408px;
        height: 645px;
        position: relative;
        overflow: hidden;
      }

      .carousel-image {
        border-radius: 10px;
        width: 1408px;
        height: 645px;
        object-fit: cover;
        /* 图片自适应填充，保持比例 */
      }

      /* 圆点指示器样式 */
      .carousel-dots {
        cursor: pointer;
        position: absolute;
        top: 43%;
        display: flex;
        gap: 20px;
        z-index: 10
      }

      .dot {
        display: flex;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        /* 圆形 */
        background-color: #919FA7;
        /* 未激活状态：半透明白色 */
        cursor: pointer;
        transition: all 0.3s;
        /* 切换动画 */
      }

      .dot.active {
        background-color: #70C3F5;
        /* 激活状态：亮蓝色（贴合科技感） */
        transform: scale(1.2);
        /* 激活时略微放大 */
      }

      .content1-1 {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        text-align: left;
        align-content: center;
        transform: translateX(15%);

        .data-item {
          display: flex;
          flex-direction: row;

          .icon {
            width: 68px;
            height: 68px;
          }

          .info {
            display: flex;
            flex-direction: column;

            .value {
              width: 500px;
              font-family: "微软雅黑常规";
              font-weight: 400;
              font-size: 43px;
              color: #FFFFFF;

              .value2 {
                width: 313px;
                font-family: "微软雅黑常规";
                font-weight: 400;
                font-size: 43px;
                color: #FFFFFF;
              }
            }

            .desc {
              width: 500px;
              font-family: "微软雅黑常规";
              font-weight: 400;
              font-size: 43px;
              color: #FFFFFF;
            }
          }
        }
      }

      .img1 {
        width: 1408px;
        height: 645px;
      }

      .contentTitle {
        padding: 0 20px;
        text-align: justify;
        text-justify: inter-ideograph;
        position: relative;
        /* line-height: 60px; */
        top: -125px;
        text-indent: 3.5ch;
        width: 1356px;
        height: 100px;
        font-family: "微软雅黑常规";
        font-weight: 400;
        font-size: 40px;
        color: #FFFFFF;
      }
    }
  }

  .box2 {
    margin-left: 132px;
    display: flex;

    .headImg {
      margin-left: 220px;
      margin-top: 41px;
      width: 53px;
      height: 58px;
      background-image: url("/imgs/ningbo/菱形 拷贝.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .title {
      margin-left: 30px;
      margin-top: 22px;
      height: 49px;
      font-family: "微软雅黑粗体";
      font-weight: 400;
      font-size: 57px;
      color: #FFFFFF;
    }

    .content {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: flex-start;
      position: absolute;
      top: 378px;
      width: 1476px;
      height: 1096px;
      background-image: url("/imgs/ningbo/矩形 933 拷贝 3.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .img1 {
        width: 1408px;
        height: 645px;
      }

      .contentTitle {
        padding: 0 20px;
        text-align: justify;
        text-justify: inter-ideograph;
        position: relative;
        line-height: 60px;
        top: -98px;
        text-indent: 3.5ch;
        width: 1356px;
        height: 100px;
        font-family: "微软雅黑常规";
        font-weight: 400;
        font-size: 34px;
        color: #FFFFFF;
      }
    }
  }

  .box3 {
    display: flex;
    position: absolute;
    margin-top: 1256px;
    margin-left: 132px;
    flex-direction: column;
    gap: 10px;

    .content {
      display: flex;
      height: 158px;
      width: 2247px;
      flex-wrap: nowrap;
      flex-direction: row;
      background-image: url("/imgs/ningbo/t(1).png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .headImg {
        margin-left: 220px;
        margin-top: 41px;
        width: 53px;
        height: 58px;
        background-image: url("/imgs/ningbo/菱形 拷贝.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .title {
        margin-left: 30px;
        margin-top: 22px;
        height: 49px;
        font-family: "微软雅黑粗体";
        font-weight: 400;
        font-size: 57px;
        color: #FFFFFF;
      }
    }

    .content2 {
      flex-wrap: nowrap;
      flex-direction: row;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 2947px;
      height: 519px;
      background-image: url("/imgs/wuhan/组 7780.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
  }
}

.middle {
  position: absolute;
  left: 3364px;
  top: 257px;
  width: 2874px;
  height: 521px;
  background-image: url("/imgs/ningbo/矩形 606.png");
  background-position: left;
  background-size: 100% 100%;
  background-repeat: no-repeat;

  .img1 {
    position: relative;
    left: 105px;
    top: 135px;
    width: 485px;
    height: 160px;
    background-image: url("/imgs/wuhan/标记 (1).png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .img2 {
    position: relative;
    left: 800px;
    top: 20px;
    width: 1900px;
    height: 75px;
    background-image: url("/imgs/guangzhou/heng.png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .content {
    top: -136px;
    left: 732px;
    position: relative;
    width: 200px;

    .years {
      font-family: "微软雅黑常规";
      font-weight: bold;
      font-size: 29px;
      color: #D6F9FF;
      line-height: 43px;
    }

    .values {
      font-family: "微软雅黑常规";
      font-weight: 400;
      font-size: 18px;
      color: #D6F9FF;
      line-height: 29px;
    }
  }

  .content2 {
    top: -40px;
    left: 900px;
    position: relative;
    width: 344px;

    .years {
      font-family: "微软雅黑常规";
      font-weight: bold;
      font-size: 29px;
      color: #D6F9FF;
      line-height: 43px;
    }

    .values {
      font-family: "微软雅黑常规";
      font-weight: 400;
      font-size: 18px;
      color: #D6F9FF;
      line-height: 29px;
    }
  }

  .content3 {
    top: -325px;
    left: 1045px;
    position: relative;
    width: 361px;

    .years {
      font-family: "微软雅黑常规";
      font-weight: bold;
      font-size: 29px;
      color: #D6F9FF;
      line-height: 43px;
    }

    .values {
      font-family: "微软雅黑常规";
      font-weight: 400;
      font-size: 18px;
      color: #D6F9FF;
      line-height: 29px;
    }
  }

  .content4 {
    top: -235px;
    left: 1389px;
    position: relative;
    width: 200px;

    .years {
      font-family: "微软雅黑常规";
      font-weight: bold;
      font-size: 29px;
      color: #D6F9FF;
      line-height: 43px;
    }

    .values {
      width: 326px;
      font-family: "微软雅黑常规";
      font-weight: 400;
      font-size: 18px;
      color: #D6F9FF;
      line-height: 29px;
    }
  }

  .content5 {
    top: -485px;
    left: 1604px;
    position: relative;
    width: 200px;

    .years {
      font-family: "微软雅黑常规";
      font-weight: bold;
      font-size: 29px;
      color: #D6F9FF;
      line-height: 43px;
    }

    .values {
      width: 300px;
      font-family: "微软雅黑常规";
      font-weight: 400;
      font-size: 18px;
      color: #D6F9FF;
      line-height: 29px;
    }
  }

  .content6 {
    top: -384px;
    left: 1857px;
    position: relative;
    width: 200px;

    .years {
      font-family: "微软雅黑常规";
      font-weight: bold;
      font-size: 29px;
      color: #D6F9FF;
      line-height: 43px;
    }

    .values {
      width: 300px;
      font-family: "微软雅黑常规";
      font-weight: 400;
      font-size: 18px;
      color: #D6F9FF;
      line-height: 29px;
    }
  }

  .content7 {
    top: -680px;
    left: 1996px;
    position: relative;
    width: 200px;

    .years {
      font-family: "微软雅黑常规";
      font-weight: bold;
      font-size: 29px;
      color: #D6F9FF;
      line-height: 43px;
    }

    .values {
      width: 300px;
      font-family: "微软雅黑常规";
      font-weight: 400;
      font-size: 18px;
      color: #D6F9FF;
      line-height: 29px;
    }
  }

  .content8 {
    top: -580px;
    left: 2329px;
    position: relative;
    width: 200px;

    .years {
      font-family: "微软雅黑常规";
      font-weight: bold;
      font-size: 29px;
      color: #D6F9FF;
      line-height: 43px;
    }

    .values {
      width: 200px;
      font-family: "微软雅黑常规";
      font-weight: 400;
      font-size: 18px;
      color: #D6F9FF;
      line-height: 29px;
    }
  }

  .content9 {
    top: -850px;
    left: 2569px;
    position: relative;
    width: 200px;

    .years {
      font-family: "微软雅黑常规";
      font-weight: bold;
      font-size: 29px;
      color: #D6F9FF;
      line-height: 43px;
    }

    .values {
      width: 200px;
      font-family: "微软雅黑常规";
      font-weight: 400;
      font-size: 18px;
      color: #D6F9FF;
      line-height: 29px;
    }
  }


  .content15 {
    display: flex;
    transform: translateX(100%);
    position: absolute;
    top: 420px;
    /* left: 238px; */
    font-family: FZLanTingHeiS-B-GB;
    font-weight: 400;
    font-size: 53px;
    color: #FFFFFF;
    background: linear-gradient(0deg, rgba(46, 131, 183, 0.66) 10%, rgba(255, 255, 255, 1) 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    width: 950px;
  }

  .content18 {
    top: 550px;
    z-index: 999;
    display: flex;
    position: absolute;
    justify-content: center;
    align-content: center;
    justify-self: anchor-center;
    /* left: 97px; */
    z-index: 999;

    .tubiao1 {
      width: 102px;
      height: 102px;
      background-image: url("/imgs/wuhan/组 7752.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .tubiao2 {
      width: 102px;
      height: 102px;
      background-image: url("/imgs/wuhan/组 7752 拷贝 3.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .tubiao3 {
      width: 102px;
      height: 102px;
      background-image: url("/imgs/wuhan/组 7752 拷贝 3(1).png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .tubiaoTitle {
      margin-left: 20px;
      margin-right: 20px;
      position: relative;
      top: -29px;
      width: auto;
      font-family: FZLanTingHeiS-B-GB;
      font-weight: 400;
      font-size: 42px;
      color: #FFFFFF;
      background: linear-gradient(0deg, rgba(46, 131, 183, 0.66) 10%, rgba(255, 255, 255, 1) 70%);
      -webkit-background-clip: text;

      .tubiaoValue {
        position: relative;
        top: 9px;
        margin-left: 20px;
        margin-right: 20px;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        font-size: 86px;
        color: #FFFFFF;
        -webkit-text-fill-color: transparent;
        background: linear-gradient(45deg,
            transparent 35%,
            rgba(#fff, 0.6),
            transparent 65%) no-repeat,
          currentColor;
        background-size: 50%;
        -webkit-background-clip: text;
        animation: sweep 2s infinite;
        background: linear-gradient(0deg, rgba(0, 216, 255, 0.66) 10%, rgba(255, 255, 255, 1) 70%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }

  .content19 {
    display: flex;
    position: absolute;
    top: 420px;
    left: 0;
    width: 2808px;
    height: 1641px;
    background-image: url("/imgs/ningbo/中间地球 2副本.png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .img1 {
      position: absolute;
      left: 532px;
      top: 287px;
      width: 1467px;
      height: 1199px;
      background-image: url("/imgs/ningbo/组 7764.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .img2 {
      z-index: 99;
      transform: scaleX(1.5);
      position: relative;
      left: 1448px;
      top: 891px;
      width: 143px;
      height: 157px;
      background-image: url("/imgs/wuhan/形状 1394 拷贝.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .img3 {
      position: relative;
      left: 1443px;
      top: 954px;
      z-index: 999;
      width: 34px;
      height: 45px;
      background-image: url("/imgs/ningbo/点位 (3).png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .img4 {
      position: absolute;
      left: -200px;
      top: 170px;
      width: 620px;
      height: 884px;
      background-image: url("/imgs/ningbo/CFL.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .img5 {
      position: absolute;
      right: -200px;
      top: 170px;
      width: 620px;
      height: 884px;
      background-image: url("/imgs/ningbo/CFL.png");
      transform: scaleX(-1);
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }


    .title {
      left: 1500px;
      top: 958px;
      position: absolute;
      font-family: FZLanTingHeiS-B-GB;
      font-weight: 400;
      font-size: 38px;
      color: #FFFFFF;
      background: linear-gradient(0deg, #E9DD7A 100%, #FFFFFF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .pointImg {
      position: absolute;
      top: 353px;
      left: 923px;
      width: 918px;
      height: 933px;
      background-image: url("/imgs/home/地图层 拷贝.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
  }
}

.right {
  display: flex;
  position: absolute;
  flex-direction: row;
  flex-wrap: wrap;
  left: 6363px;
  top: 200px;

  .box {
    display: flex;
    margin-left: 76px;
    flex-wrap: wrap;
    flex-direction: row;

    .headbox {
      display: flex;
      height: 158px;
      width: 1652px;
      flex-wrap: nowrap;
      flex-direction: row;
      background-image: url("/imgs/ningbo/t(1).png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .headImg {
        margin-left: 220px;
        margin-top: 41px;
        width: 53px;
        height: 58px;
        background-image: url("/imgs/ningbo/菱形 拷贝.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .title {
        margin-left: 30px;
        margin-top: 22px;
        height: 49px;
        font-family: "微软雅黑粗体";
        font-weight: 400;
        font-size: 57px;
        color: #FFFFFF;
      }
    }

    .modules-container {
      display: flex;
      gap: 20px;
      padding: 20px;
      margin-left: 100px;
    }

    .content {
      position: absolute;
      align-items: anchor-center;
      top: 178px;
      gap: 24px;
      width: 950px;
      height: 466px;
      background-image: url("/imgs/wuhan/矩形 933 拷贝 3.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      justify-content: center;
      flex-direction: row;

      .title {
        width: 137px;
        font-family: "微软雅黑常规";
        font-weight: 400;
        font-size: 33px;
        color: #FFFFFF;
        line-height: 46px;
      }

      /* 按钮选中状态（变色效果） */
      .left-buttons .btn.active {
        width: 236px;
        height: 60px;
        background-image: url("/imgs/wuhan/矩形 1269.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .left-buttons {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        gap: 10px;

        .btn {
          padding: 20px;
          display: flex;
          align-items: anchor-center;
          text-align: center;
          width: 236px;
          height: 60px;
          background-image: url("/imgs/wuhan/矩形 1269(1).png");
          background-position: left;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          font-family: "微软雅黑常规";
          font-size: 24px;
          color: #FFFFFF;
          line-height: 28px;

        }
      }

      .rightbox {
        display: flex;
        flex-direction: row;
        margin: 50px 20px;
        gap: 20px;

        .box1-1 {
          justify-content: space-around;
          display: flex;
          align-items: center;
          flex-direction: column;

          .text {
            width: 359px;
            font-family: "微软雅黑常规";
            font-weight: 400;
            font-size: 24px;
            color: #FFFFFF;
            line-height: 29px;
            height: 366px;
            background-image: url("/imgs/wuhan/矩形 933 拷贝 7.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;

          }

          .btn {
            width: 178px;
            height: 59px;
            background: #1E4B79;
            border-radius: 18px;
            font-family: "微软雅黑常规";
            font-weight: bold;
            font-size: 26px;
            color: #FFFFFF;
            line-height: 60px;
            text-align: center;
          }

          .item {
            display: flex;
            flex-direction: row;

            .item1 {
              width: 110px;
              font-family: "微软雅黑常规";
              font-weight: 400;
              font-size: 24px;
              color: #37D7FF;
              line-height: 31px;
            }

            .icon {
              width: 1px;
              height: 37px;
              background: #37ADFF;
            }
          }
        }

        .box1-2 {
          width: 279px;
          height: 176px;
          background-image: url("/imgs/shanghai/1.png");
          background-position: left;
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }
      }
    }

  }

  .box2 {
    margin-left: 76px;
    display: flex;
    position: relative;
    /* top: 20px; */
    flex-wrap: wrap;
    flex-direction: row;

    .headbox {
      display: flex;
      height: 158px;
      width: 1652px;
      flex-wrap: nowrap;
      flex-direction: row;
      background-image: url("/imgs/ningbo/t(1).png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .headImg {
        margin-left: 220px;
        margin-top: 41px;
        width: 53px;
        height: 58px;
        background-image: url("/imgs/ningbo/菱形 拷贝.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .title {
        margin-left: 30px;
        margin-top: 22px;
        height: 49px;
        font-family: "微软雅黑粗体";
        font-weight: 400;
        font-size: 57px;
        color: #FFFFFF;
      }
    }

    .content {
      position: absolute;
      align-items: anchor-center;
      top: 178px;
      gap: 70px;
      margin-left: 100px;
      display: flex;
      flex-wrap: nowrap;
      align-content: center;
      justify-content: center;
      flex-direction: row;

      .leftbox {
        padding: 40px;
        width: 970px;
        height: 417px;
        background-image: url("/imgs/wuhan/矩形 937 拷贝.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        width: 877px;
        font-family: "微软雅黑常规";
        font-weight: 400;
        font-size: 31px;
        color: #FFFFFF;
        line-height: 56px;
      }

      .rightbox {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        align-content: center;
        width: 1826px;
        height: 416px;
        background-image: url("/imgs/wuhan/组 7816.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .content1-1 {
          position: relative;
          top: 67px;
          display: flex;
          flex-direction: row;
          gap: 220px;

          .title {
            width: 89px;
            height: 20px;
            font-family: "微软雅黑粗体";
            font-size: 24px;
            color: #FFFFFF;
            line-height: 40px;
            font-style: italic;
          }
        }

        .content1-2 {
          position: relative;
          top: 160px;
          left: 80px;
          display: flex;
          flex-direction: column;
          gap: 15px;

          .title {
            width: 350px;
            height: 30px;
            font-family: "微软雅黑粗体";
            font-size: 31px;
            color: #70C3F5;
            line-height: 50px;
          }

          .value {
            width: 400px;
            height: 22px;
            font-family: "微软雅黑常规";
            font-weight: 400;
            font-size: 22px;
            color: #FFFFFF;
            line-height: 50px;
          }
        }

        .content1-3 {
          position: relative;
          top: -120px;
          left: -106px;
          display: flex;
          flex-direction: column;
          gap: 15px;

          .title {
            width: 350px;
            height: 30px;
            font-family: "微软雅黑粗体";
            font-size: 31px;
            color: #70C3F5;
            line-height: 50px;
          }

          .value {
            width: 422px;
            height: 22px;
            font-family: "微软雅黑常规";
            font-weight: 400;
            font-size: 22px;
            color: #FFFFFF;
            line-height: 70px;
          }
        }

        .content1-4 {
          position: relative;
          top: 160px;
          left: -340px;
          display: flex;
          flex-direction: column;
          gap: 15px;

          .title {
            width: 350px;
            height: 30px;
            font-family: "微软雅黑粗体";
            font-size: 31px;
            color: #70C3F5;
            line-height: 50px;
          }

          .value {
            width: 428px;
            height: 22px;
            font-family: "微软雅黑常规";
            font-weight: 400;
            font-size: 22px;
            color: #FFFFFF;
            line-height: 70px;
          }
        }

        .content1-5 {
          position: relative;
          top: -120px;
          left: -520px;
          display: flex;
          flex-direction: column;
          gap: 15px;

          .title {
            width: 350px;
            height: 30px;
            font-family: "微软雅黑粗体";
            font-size: 31px;
            color: #70C3F5;
            line-height: 50px;
          }

          .value {
            width: 328px;
            height: 22px;
            font-family: "微软雅黑常规";
            font-weight: 400;
            font-size: 22px;
            color: #FFFFFF;
            line-height: 70px;
          }
        }

        .content1-6 {
          position: relative;
          top: 20px;
          left: 1010px;
          display: flex;
          flex-direction: column;
          gap: 15px;

          .title {
            width: 350px;
            height: 30px;
            font-family: "微软雅黑粗体";
            font-size: 31px;
            color: #70C3F5;
            line-height: 50px;
          }

          .value {
            width: 328px;
            height: 22px;
            font-family: "微软雅黑常规";
            font-weight: 400;
            font-size: 22px;
            color: #FFFFFF;
            line-height: 70px;
          }
        }

        .content1-7 {
          position: relative;
          top: -265px;
          left: 700px;
          display: flex;
          flex-direction: column;
          gap: 15px;

          .title {
            width: 350px;
            height: 30px;
            font-family: "微软雅黑粗体";
            font-size: 31px;
            color: #70C3F5;
            line-height: 50px;
          }

          .value {
            width: 400px;
            height: 22px;
            font-family: "微软雅黑常规";
            font-weight: 400;
            font-size: 22px;
            color: #FFFFFF;
            line-height: 70px;
          }
        }

        .content1-8 {
          position: relative;
          top: 20px;
          left: 300px;
          display: flex;
          flex-direction: column;
          gap: 15px;

          .title {
            width: 350px;
            height: 30px;
            font-family: "微软雅黑粗体";
            font-size: 31px;
            color: #70C3F5;
            line-height: 50px;
          }

          .value {
            width: 400px;
            height: 22px;
            font-family: "微软雅黑常规";
            font-weight: 400;
            font-size: 22px;
            color: #FFFFFF;
            line-height: 70px;
          }
        }
      }
    }
  }

  .box3 {
    margin-left: 76px;
    display: flex;
    position: relative;
    top: 450px;
    flex-wrap: wrap;
    flex-direction: row;

    .headbox {
      display: flex;
      height: 158px;
      width: 1652px;
      flex-wrap: nowrap;
      flex-direction: row;
      background-image: url("/imgs/ningbo/t(1).png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .headImg {
        margin-left: 220px;
        margin-top: 41px;
        width: 53px;
        height: 58px;
        background-image: url("/imgs/ningbo/菱形 拷贝.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .title {
        margin-left: 30px;
        margin-top: 22px;
        height: 49px;
        font-family: "微软雅黑粗体";
        font-weight: 400;
        font-size: 57px;
        color: #FFFFFF;
      }
    }

    .content {
      position: absolute;
      left: 70px;
      flex-wrap: nowrap;
      top: 152px;
      flex-direction: row;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 140px;

      .content3 {
        display: flex;
        flex-direction: column;

        .content3-1 {
          display: flex;
          flex-direction: row;

          .content-title {
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: FZLanTingHeiS-B-GB;
            font-weight: 400;
            font-size: 33px;
            color: #FFFFFF;
            text-align: center;
            line-height: 70px;
            width: 310px;
            height: 134px;
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;
          }
        }

        .content3-2 {
          .chartsGl {
            width: 400px;
            height: 400px;
          }
        }
      }

      .content4 {
        display: flex;
        flex-direction: column;

        .content4-1 {
          display: flex;
          flex-direction: row;

          .content-title {
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: FZLanTingHeiS-B-GB;
            font-weight: 400;
            font-size: 33px;
            color: #FFFFFF;
            text-align: center;
            line-height: 70px;
            width: 310px;
            height: 134px;
            /* background-image: url("/imgs/wuhan/图层 1055 拷贝 2.png");*/
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;
          }

        }

        .content4-2 {
          .chartsGl {
            width: 90%;
            height: 400px;
          }
        }
      }

      .content2 {
        display: flex;
        flex-direction: column;

        .content1-1 {
          display: flex;
          align-items: center;
          justify-content: center;
          font-family: FZLanTingHeiS-B-GB;
          font-weight: 400;
          font-size: 33px;
          color: #FFFFFF;
          text-align: center;
          line-height: 70px;
          width: 310px;
          height: 134px;
          background-image: url("/imgs/wuhan/图层 1055 拷贝 2.png");
          background-position: left;
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }

        .content1-2 {
          width: 400px;
          height: 400px;
        }
      }

      .leftbox {
        align-self: end;
        /* width: 860px; */
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: space-between;

        .content1-1 {
          display: flex;
          align-items: center;
          justify-content: center;
          font-family: FZLanTingHeiS-B-GB;
          font-weight: 400;
          font-size: 33px;
          color: #FFFFFF;
          text-align: center;
          line-height: 70px;
          width: 310px;
          height: 134px;
          background-image: url("/imgs/wuhan/图层 1055 拷贝 2.png");
          background-position: left;
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }

        .box2-1 {
          display: flex;
          flex-direction: row;

          .img1 {
            width: 161px;
            height: 161px;
          }

          .box2-2 {
            display: flex;
            flex-direction: column;
            align-items: center;

            .text {
              font-family: "微软雅黑常规";
              font-weight: 400;
              font-size: 39px;
              color: #FFFFFF;

            }

            .box2-3 {
              display: flex;
              width: 220px;
              flex-wrap: nowrap;
              flex-direction: row;
              align-items: center;

              .text2 {

                font-family: YouSheBiaoTiHei;
                font-weight: 400;
                font-size: 88px;
                color: #FFFFFF;
                background: linear-gradient(0deg, rgba(0, 216, 255, 0.6) 10%, rgba(255, 255, 255, 1) 70%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
              }

              .text3 {
                font-family: "微软雅黑常规";
                font-weight: 400;
                font-size: 42px;
                color: #969696 !important;
              }
            }
          }
        }
      }

      .rightbox {
        display: flex;
        gap: 20px;
        /* 文本区与图片区间隔 */
        width: 1921px;
        height: 525px;
        background-image: url("/imgs/shanghai/组 7780.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;

      }

      .box1-2 {
        /* 保持现有尺寸，确保背景图自适应 */
        width: 478px;
        height: 320px;
        background-position: center;
        background-size: cover;
        /* 图片自适应容器 */
        background-repeat: no-repeat;
      }
    }
  }

  .box4 {
    margin-left: 172px;
    display: flex;
    flex-direction: column;
    margin-top: 920px;
    gap: 20px;

    .headbox {
      display: flex;
      height: 158px;
      width: 1652px;
      flex-wrap: nowrap;
      flex-direction: row;
      background-image: url("/imgs/ningbo/t(1).png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .headImg {
        margin-left: 220px;
        margin-top: 41px;
        width: 53px;
        height: 58px;
        background-image: url("/imgs/ningbo/菱形 拷贝.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .title {
        margin-left: 30px;
        margin-top: 22px;
        height: 49px;
        font-family: "微软雅黑粗体";
        font-weight: 400;
        font-size: 57px;
        color: #FFFFFF;
      }
    }

    .content {
      flex-direction: row;
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      align-items: center;
      gap: 20px;

      .leftbox {
        display: flex;
        flex-direction: row;
        align-items: normal;
        align-self: anchor-center;
        justify-content: space-around;
        width: 1772px;
        height: 426px;
        background-image: url("/imgs/guangzhou/矩形 937 拷贝 2.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        font-family: "微软雅黑常规";

        /* 新增：小白点样式 */
        .content1-2 .text::before {
          content: '';
          display: inline-block;
          margin-right: 15px;
          /* 白点与文字的间距 */
          vertical-align: middle;
          width: 20px;
          height: 20px;
          background: #49B8FF;
          border-radius: 5px;
        }

        .content1-1 {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          justify-items: anchor-center;
          gap: 40px;

          .img {
            transform: translateX(-23%);
            width: 65px;
            height: 70px;
            background-image: url("/imgs/guangzhou/教科研成果.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;
          }

          .text {
            width: 42px;
            writing-mode: vertical-rl;
            font-family: "微软雅黑粗体";
            font-size: 42px;
            color: #FFFFFF;
            line-height: 63px;
            background: linear-gradient(0deg, rgba(46, 131, 183, 0.66) 10%, rgba(255, 255, 255, 1) 70%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }

        .content1-2 {
          display: flex;
          flex-direction: column;
          justify-content: center;

          .text {
            width: 1478px;
            font-family: "微软雅黑常规";
            font-weight: 400;
            font-size: 35px;
            color: #FFFFFF;
            line-height: 64px;

            span {
              width: 81px;
              font-family: YouSheBiaoTiHei;
              font-weight: 400;
              font-size: 63px;
              color: #FFFFFF;
              background: linear-gradient(0deg, rgba(0, 216, 255, 0.66) 10%, rgba(255, 255, 255, 1) 70%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }
          }
        }
      }

      .rightbox {
        display: flex;
        flex-direction: row;
        align-items: normal;
        align-self: anchor-center;
        justify-content: space-around;
        width: 1136px;
        height: 426px;
        background-image: url("/imgs/guangzhou/矩形 937 拷贝 2.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        font-family: "微软雅黑常规";

        /* 新增：小白点样式 */
        .content1-2 .text::before {
          content: '';
          display: inline-block;
          margin-right: 15px;
          /* 白点与文字的间距 */
          vertical-align: middle;
          width: 20px;
          height: 20px;
          background: #49B8FF;
          border-radius: 5px;
        }

        .content1-1 {
          transform: translateX(-64%);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          justify-items: anchor-center;
          gap: 40px;

          .img {
            transform: translateX(-23%);
            width: 65px;
            height: 70px;
            background-image: url("/imgs/guangzhou/教科研成果.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;
          }

          .text {
            width: 42px;
            writing-mode: vertical-rl;
            font-family: "微软雅黑粗体";
            font-size: 42px;
            color: #FFFFFF;
            line-height: 63px;
            background: linear-gradient(0deg, rgba(46, 131, 183, 0.66) 10%, rgba(255, 255, 255, 1) 70%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }

        .content1-2 {
          display: flex;
          flex-direction: column;
          justify-content: center;

          .text {
            width: 900px;
            font-family: "微软雅黑常规";
            font-weight: 400;
            font-size: 35px;
            color: #FFFFFF;
            line-height: 64px;

            span {
              width: 81px;
              font-family: "微软雅黑加粗";
              font-weight: 400;
              font-size: 35px;
              color: #FF3A3A;
            }
          }
        }
      }
    }
  }
}
</style>